<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoad"
      >
         <div v-for="(item, index) in arr" :key="index">
             <img :src="item.img" alt="">
         </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import Vue from "vue";
import { List } from "vant";
import { mapState,mapActions} from "vuex"
Vue.use(List);
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  mounted() {
      this.getList()
  },
  computed:{
     ...mapState(["arr"])
  },
  methods: {
    ...mapActions(["getList","getAddList"]),
    onLoad() {
      
      setTimeout(() => {
        this.getAddList()
        this.loading = false;
        if (this.arr.length >= 35) {
          this.finished = true;
        }
      }, 1000);
    },


    // 上拉刷新的函数
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
    //   this.loading = true;
    //   this.onLoad();
             setTimeout(() => {
                this.getList()  
                this.refreshing = false
            }, 1000);

     
    },
  },
};
</script>

<style>
</style>